<!DOCTYPE html>
<html lang="cn">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>正方体拖拽旋转放大</title>
    <style>
      body {
        margin: 0;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(to bottom, #ff69b4, #00bfff);
        overflow: hidden;
        cursor: grab;
      }
      .scene {
        width: 400px;
        height: 400px;
        perspective: 1200px; /* 设置透视距离，让3D效果更真实 */
        position: relative;
        z-index: 1;
      }
      .cube {
        width: 300px;
        height: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform-style: preserve-3d; /* 子元素保持3D空间 */
        transform: translate(-50%, -50%) rotateX(-35deg) rotateY(45deg); /* 初始角度 */
        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* 平滑动画 */
      }
      .face {
        position: absolute;
        width: 300px;
        height: 300px;
        background-size: cover;
        background-position: center;
        opacity: 0.98;
        border: 2px solid #fff2;
        box-shadow: 0 0 20px #0008;
        opacity: 0.7;
      }
      .face.front {
        transform: rotateY(0deg) translateZ(150px);
        background-image: url('static/img/1.png');
      }
      .face.back {
        transform: rotateY(180deg) translateZ(150px);
        background-image: url('static/img/2.png');
      }
      .face.right {
        transform: rotateY(90deg) translateZ(150px);
        background-image: url('static/img/3.png');
      }
      .face.left {
        transform: rotateY(-90deg) translateZ(150px);
        background-image: url('static/img/4.png');
      }
      .face.top {
        transform: rotateX(90deg) translateZ(150px);
        background-image: url('static/img/5.png');
      }
      .face.bottom {
        transform: rotateX(-90deg) translateZ(150px);
        background-image: url('static/img/6.png');
      }
    </style>
  </head>
  <body>
    <div class="scene">
      <div class="cube" id="cube">
        <div class="face front"></div>
        <div class="face back"></div>
        <div class="face right"></div>
        <div class="face left"></div>
        <div class="face top"></div>
        <div class="face bottom"></div>
      </div>
    </div>
    <script>
      const cube = document.getElementById('cube')
      let lastX, lastY
      let rotX = -20,
        rotY = 20
      let fullscreen = false
      let lastFace = null
      let allowRotation = false // 控制是否允许旋转
      let autoRotate = true // 控制自动旋转
      let mouseX = 0,
        mouseY = 0

      // 移动端触摸旋转优化
      let touchStartX = 0, touchStartY = 0
      let isTouching = false

      cube.addEventListener('touchstart', (e) => {
        if (fullscreen) return
        if (e.touches.length === 1) {
          isTouching = true
          allowRotation = true
          touchStartX = e.touches[0].clientX
          touchStartY = e.touches[0].clientY
          lastX = touchStartX
          lastY = touchStartY
        }
      })

      cube.addEventListener('touchmove', (e) => {
        if (!isTouching || !allowRotation || fullscreen) return
        const touch = e.touches[0]
        const dx = touch.clientX - lastX
        const dy = touch.clientY - lastY
        lastX = touch.clientX
        lastY = touch.clientY

        // 设置一个最小移动阈值，避免误触
        if (Math.abs(dx) < 5 && Math.abs(dy) < 5) return // 增加阈值以避免微小移动触发旋转

        rotY += dx * 0.2 // 调整灵敏度：原为 0.5，改为 0.2
        rotX -= dy * 0.2 // 调整灵敏度：原为 0.5，改为 0.2
        setCubeRotation(rotX, rotY)

        autoRotate = false
        clearTimeout(window.rotationTimeout)
        window.rotationTimeout = setTimeout(() => {
          autoRotate = true
        }, 500)
      })

      cube.addEventListener('touchend', (e) => {
        isTouching = false
        allowRotation = false
        lastX = undefined
        lastY = undefined
      })

      function setCubeRotation(x, y) {
        cube.style.transform = `translate(-50%, -50%) rotateX(${x}deg) rotateY(${y}deg)`
      }
      setCubeRotation(rotX, rotY)

      function animate() {
        if (autoRotate && !fullscreen) {
          rotY += 0.4 // 自动向右缓缓旋转
          setCubeRotation(rotX, rotY)
          document.body.style.cursor = 'none' // 自动旋转时隐藏光标
        }
        requestAnimationFrame(animate)
      }
      requestAnimationFrame(animate)

      // 鼠标进入：允许旋转
      cube.addEventListener('mouseenter', () => {
        allowRotation = true
      })

      // 鼠标离开：停止旋转
      cube.addEventListener('mouseleave', () => {
        allowRotation = false
      })

      // 鼠标移动事件：直接更新立方体旋转状态
      document.addEventListener('mousemove', (e) => {
        document.body.style.cursor = 'auto' // 恢复光标显示
        if (!allowRotation || fullscreen) return
        const dx = e.movementX
        const dy = e.movementY
        rotY += dx * 0.5
        rotX -= dy * 0.5
        setCubeRotation(rotX, rotY)

        mouseX = e.clientX
        mouseY = e.clientY

        autoRotate = false // 鼠标移动时关闭自动旋转
        clearTimeout(window.rotationTimeout)
        window.rotationTimeout = setTimeout(() => {
          autoRotate = true // 鼠标停止移动后开启自动旋转
        }, 500)
      })

      // 键盘方向键控制旋转
      document.addEventListener('keydown', (e) => {
        if (fullscreen) return

        const step = 10 // 每次旋转步长
        switch (e.key) {
          case 'ArrowUp':
            rotX += step
            break
          case 'ArrowDown':
            rotX -= step
            break
          case 'ArrowLeft':
            rotY += step
            break
          case 'ArrowRight':
            rotY -= step
            break
          default:
            return // 不处理其他按键
        }

        setCubeRotation(rotX, rotY)
        autoRotate = false // 按下方向键时关闭自动旋转
        clearTimeout(window.rotationTimeout)
        window.rotationTimeout = setTimeout(() => {
          autoRotate = true // 停止按键后恢复自动旋转
        }, 500)
      })

      // 进入全屏模式（设置body背景图片）
      function showFullscreenFace(face) {
        lastFace = face
        // 用getComputedStyle获取背景图片
        const bg = window.getComputedStyle(face).backgroundImage
        if (bg && bg !== 'none') {
          document.body.style.backgroundImage = bg
          document.body.style.backgroundSize = 'cover'
          document.body.style.backgroundPosition = 'center'
          document.body.style.backgroundRepeat = 'no-repeat'
        }
        document.querySelector('.scene').style.display = 'none'
        fullscreen = true
        // 监听body点击退出
        document.body.addEventListener('click', exitFullscreenFace, { once: true })
      }

      // 离开全屏模式
      function exitFullscreenFace() {
        document.body.style.backgroundImage = 'linear-gradient(to bottom, #FF69B4, #00BFFF)'
        document.body.style.backgroundSize = ''
        document.body.style.backgroundPosition = ''
        document.body.style.backgroundRepeat = ''
        document.querySelector('.scene').style.display = ''
        fullscreen = false
        lastFace = null
      }

      // 正方体点击事件
      cube.addEventListener('click', (e) => {
        e.stopPropagation()
        if (fullscreen) return

        // 直接获取点击的面
        if (e.target.classList.contains('face')) {
          const face = e.target
          showFullscreenFace(face)
        }
      })
      // ESC事件
      document.addEventListener('keydown', (e) => {
        // 对于旧浏览器可能需要使用 event.keyCode === 27
        if (event.key === 'Escape') {
          exitFullscreenFace()
        }
      })
    </script>
  </body>
</html>
